<template>
  <view id="accountlist-box">
    <view>
      <view class="account_list">
        <view
          class="userName_box"
          @click="hangleClickUser(index)"
          v-for="(item,index) in userList "
          :key="index"
        >
          <view class="left">
            <image class="avatar" />
            <view class="userInfo">
              <p class="user_text">账号昵称</p>
              <p class="username">{{item.account}}</p>
            </view>
          </view>
          <view class="right">
            <i v-if="activeUser == index" class="iconfont iconright"></i>
          </view>
        </view>
        <view class="addUserName" @click="openclose(1)">
          <i class="iconfont iconadd"></i>
          <view class="add_text">添加或注册账号</view>
        </view>
      </view>
      <view class="relation_box" @click="relation">
        <view class="relation">关联账号</view>
        <i class="iconfont iconjiantou"></i>
      </view>
      <view class="account_bottom">
        <view class="logOut" @click="logOut">退出当前账号</view>
        <view class="logOut_quanqiu" @click="relation">退出全球共德</view>
      </view>
      <uni-popup ref="popup" type="center">
        <view class="addUser_box">
          <view class="title">请输入智慧工地账号密码进行绑定</view>
          <view class="username">
            <text>账 号:</text>
            <input type="text" v-model="account" />
          </view>
          <view class="password">
            <text>密 码:</text>
            <input type="password" v-model="password" />
          </view>
          <view class="bottom">
            <view class="button_out" @click="openclose(0)">关闭</view>
            <view class="button_on" @click="bangding">绑定</view>
          </view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>
<script>
import { uniPopup } from "@dcloudio/uni-ui";
export default {
  components: { uniPopup },
  data() {
    return {
      account: "",
      password: "",
      userList: [],
      token: wx.getStorageSync("userInfo").token,
      activeUser: 0
    };
  },
  methods: {
    hangleClickUser(index) {
      this.activeUser = index;
    },
    logOut() {
      if (this.userList.length > 0) {
        this.$axios({
          url: "/api/smart/delectAccount",
          data: {
            token: this.token,
            only_code: this.userList[this.activeUser].only_code
          }
        }).then(res => {
          uni.showToast({
            title: '退出成功',
            icon: "success",
          });
          this.getAccountList();
        });
      } else {
        uni.showToast({
          title: "无账号",
          mask: true,
          duration: 2000,
          icon: "none"
        });
      }
    },
    bangding() {
      if (this.account.length < 1) {
        uni.showToast({
          title: "账号不能为空",
          mask: true,
          duration: 2000,
          icon: "none"
        });
        return;
      }
      if (this.password.length < 1) {
        uni.showToast({
          title: "密码不能为空",
          mask: true,
          duration: 2000,
          icon: "none"
        });
        return;
      }
      let md5Pasw = this.$gg.md5_str(this.password);
      this.$axios({
        url: "api/smart/addAccount",
        data: { token : this.token, account: this.account, password: md5Pasw }
      }).then(
        res => {
          if (res.data.Code == 200000) {
            //this.$store.commit("setSmartUser", { account: this.account, password: md5Pasw });
            uni.showToast({
              title: "绑定成功",
              duration: 2000,
              mask: true,
              icon: "success"
            });
            this.getAccountList();
            this.$refs.popup.close();
          } else {
            uni.showToast({
              title: res.data.returnMsg,
              duration: 2000,
              mask: true,
              icon: "none"
            });
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    getAccountList() {
      this.$axios({
        url: "/api/smart/getAccountList",
        data: { token: this.token }
      }).then(res => {
        this.userList = res.data.returnData.userList;
      });
    },
    relation() {
      uni.showToast({
        title: "建设中...",
        icon: "none"
      });
    },
    openclose(num) {
      if (num) {
        this.$refs.popup.open();
      } else {
        this.$refs.popup.close();
      }
    }
  },
  mounted() {
    // this.$refs.popup.open();
    if (!this.token) {
      uni.navigateTo({ url: "../../pages/login/index" });
      return;
    } // 如果没有登陆直接跳
    this.getAccountList();
  }
};
</script>
<style lang="scss">
page {
  background: #f1f1f1;
}
.addUser_box {
  width: 640rpx;
  height: 500rpx;
  background: #fff;
  border-radius: 20rpx;
  .title {
    width: 100%;
    line-height: 88rpx;
    text-align: center;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
    font-size: 24rpx;
  }
  .password,
  .username {
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    text {
      font-weight: 600;
      margin-right: 10px;
    }
    input {
      width: 420rpx;
      height: 68rpx;
      border-radius: 10rpx;
      border: 1px solid #ddd;
      padding-left: 20rpx;
    }
  }
  .bottom {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 70rpx;
    .button_on,
    .button_out {
      width: 200rpx;
      line-height: 64rpx;
      background: #3271ef;
      color: #fff;
      text-align: center;
      border-radius: 12rpx;
    }
  }
}
#accountlist-box {
  position: relative;
  padding-top: 86rpx;
  display: flex;
  justify-content: center;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: -12rpx;
    right: 0;
    height: 172rpx;
    background: #3271ef;
    border-radius: 12rpx;
    z-index: -1;
  }
  .account_bottom {
    background: #fff;
    border-radius: 20rpx;
    view {
      padding-top: 24rpx;
      padding-bottom: 24rpx;
      margin-right: 24rpx;
      margin-left: 24rpx;
      border-bottom: 1px solid #ddd;
      &:nth-last-child(1) {
        border-bottom: 0;
      }
    }
  }
  .relation_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx;
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    i.iconfont.iconjiantou {
      font-size: 32rpx;
    }
  }
  .account_list {
    width: 650rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 10rpx;
    margin-bottom: 20rpx;
    .userName_box {
      height: 120rpx;
      border-bottom: 1px solid #ddd;
      padding-top: 30rpx;
      padding-bottom: 30rpx;
      margin-right: 30rpx;
      margin-left: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        .avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          background: #888888;
        }
        .userInfo {
          margin-left: 30rpx;
          font-size: 24rpx;
          p.user_text {
            color: #a5a5a5;
            font-size: 24rpx;
          }
          p.username {
            color: rgb(14, 13, 13);
          }
        }
      }
      .right {
        .iconfont {
          font-size: 32rpx;
          color: #3271ef;
        }
      }
    }
    .addUserName {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 30rpx;
      height: 120rpx;
      .iconfont {
        font-size: 32rpx;
        line-height: 80rpx;
        width: 80rpx;
        border-radius: 50%;
        text-align: center;
        background: #eaedf4;
        color: #888888;
      }
      .add_text {
        margin-left: 30rpx;
        font-size: 30rpx;
        color: #3271ef;
      }
    }
  }
}
</style>